<template>
  <div class="commonBox">
      <div class="commonTopBox">
          <Topmenu></Topmenu>
      </div>
      <div class="commonContent">
         <div class="commonContentLeft">
             <Leftmenu></Leftmenu>
         </div>
         <div class="commonContentRight" id="commonContentRight">
            <div class="commonContentHtml">
                <!-- 创建 -->
                <div class="creatBox">
                    <div class="commonTitle">创建</div>
                    <div class="mainBox">
                       <!--  -->
                       <el-form :model="formOption" :rules="rules" ref="formOption" label-width="100px" class="demo-ruleForm">
                           <ul class="formUl">
                               <li>
                                 <el-form-item label="名字：" prop="poemTitle">
                                   <el-input v-model="formOption.poemTitle" size="medium"></el-input>
                                 </el-form-item>
                               </li>
                               <li>
                                 <el-form-item label="作者：" prop="author">
                                   <el-input v-model="formOption.author" size="medium"></el-input>
                                 </el-form-item>
                               </li>
                               <li>
                                 <el-form-item label="所属朝代：" prop="dynasty">
                                    <el-select v-model="formOption.dynasty" size="medium" placeholder="请选择所属朝代">
                                      <el-option v-for="item in dynastyArr" :key="item.value" :label="item.label" :value="item.value"></el-option>
                                      <!-- <el-option label="区域二" value="beijing"></el-option> -->
                                    </el-select>
                                  </el-form-item>
                               </li>
                               <li>
                                 <el-form-item label="标签：">
                                    <el-tag
                                      :key="tagItem"
                                      v-for="tagItem in formOption.tag"
                                      closable
                                      :disable-transitions="false"
                                      @close="tagClose(tagItem)">
                                      {{tagItem}}
                                    </el-tag>
                                    <el-input
                                      class="input-new-tag"
                                      v-if="tagVisible"
                                      v-model="tagValue"
                                      ref="saveTagInput"
                                      size="small"
                                      @keyup.enter.native="handleTagConfirm"
                                      @blur="handleTagConfirm"
                                    >
                                    </el-input>
                                    <el-button v-else class="button-new-tag" size="small" @click="showTagInput">+ New Tag</el-button>
                                 </el-form-item>
                               </li>
                               <li>
                                 <el-form-item label="诗词内容：" prop="poemArry">
                                    <el-input type="textarea" autosize v-model="formOption.poemArry" placeholder="每一个换行为一个主体"></el-input>
                                 </el-form-item>
                               </li>
                               <li>
                                 <el-form-item label="诗词翻译：" prop="translation">
                                    <el-input type="textarea" autosize v-model="formOption.translation" placeholder="每一个换行为一个主体"></el-input>
                                 </el-form-item>
                               </li>
                               <li>
                                 <el-form-item label="对齐方式：">
                                      <el-radio v-model="formOption.textAlign" label="left">左对齐</el-radio>
                                      <el-radio v-model="formOption.textAlign" label="justify">居中对齐</el-radio>
                                      <el-radio v-model="formOption.textAlign" label="right">右对齐</el-radio>
                                 </el-form-item>
                               </li>
                               <li style="width:100%;margin-right:0;">
                                    <el-form-item>
                                      <el-button type="primary" @click="submitForm('formOption')">立即创建</el-button>
                                      <el-button @click="resetForm('formOption')">重置</el-button>
                                    </el-form-item>
                               </li>
                           </ul>
                       </el-form>
                    </div>
                </div>
            </div>
         </div>
      </div>
  </div>
</template>

<script>
    import Leftmenu from '@/components/Leftmenu.vue'
    import Topmenu from '@/components/Topmenu.vue'

    export default {
      name: 'commonContentRight',
      components: {
        Leftmenu,
        Topmenu
      },
      data(){
        
        return{
            tagVisible: false,//tag输入框是否显示
            tagValue: '',
            // dynastyArr:['先秦','两汉','魏晋','南北朝','隋朝','唐朝','五代','宋代','金朝','元代','明代','清代','近现代'],
            dynastyArr:[
              {
                value:1,
                label:'先秦'
              },
              {
                value:2,
                label:'两汉'
              },
              {
                value:3,
                label:'魏晋'
              },
              {
                value:4,
                label:'隋朝'
              },
              {
                value:5,
                label:'唐朝'
              },
              {
                value:6,
                label:'五代'
              },
              {
                value:7,
                label:'宋代'
              },
              {
                value:8,
                label:'金朝'
              },
              {
                value:9,
                label:'元代'
              },
              {
                value:10,
                label:'明代'
              },
              {
                value:11,
                label:'清代'
              },
              {
                value:12,
                label:'近现代'
              },
            ],
            formOption:{
              poemTitle:'',
              author:'',
              dynasty:'',
              poemArry:'',
              translation:'',
              tag: [],
              textAlign:''
            },
            rules: {
                poemTitle: [
                  { required: true, message: '请输入诗词名', trigger: 'blur' }
                ],
                author: [
                  { required: true, message: '请输入作者', trigger: 'blur' }
                ],
                dynasty: [
                  { required: true, message: '请选择所属朝代', trigger: 'change' }
                ],
                poemArry: [
                  { required: true, message: '请填写诗词内容', trigger: 'blur' }
                ],
                translation: [
                  { required: true, message: '请填写诗词翻译', trigger: 'blur' }
                ],
                
            }
        }
      },
      methods:{
        // tag关闭
        tagClose(tag) {
            this.formOption.tag.splice(this.formOption.tag.indexOf(tag), 1);
        },
        // tag输入框
        showTagInput() {
            this.tagVisible = true;
            this.$nextTick(_ => {
              this.$refs.saveTagInput.$refs.input.focus();
            });
        },
        // tag创建
        handleTagConfirm() {
            let tagValue = this.tagValue;
            if (tagValue) {
              this.formOption.tag.push(tagValue);
            }
            this.tagVisible = false;
            this.tagValue = '';
        },
        // 确认提交
        submitForm(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              // alert('submit!');
              this.$message({
                message: '创建成功',
                type: 'success'
              });
              this.$router.push({path: '/Listmanage',query:{id: 'abc'}})
            } else {
              // console.log('error submit!!');
              console.log(this.formOption)
              this.$message({
                message: '提交失败',
                type: 'warning'
              });
              return false;
            }
          });
        },
        // 重置
        resetForm(formName) {
          this.$refs[formName].resetFields();
        }
      }
    }
</script>

<style scoped>
   
   
   .formUl{
     width: 100%;
     overflow: hidden;
   }
   .formUl li{
      float: left;
      width: 48%;
      margin-right: 4%;
      margin-bottom: 15px;
   }
   .formUl li:nth-child(2n){
     margin-right: 0;
   }
   .el-tag + .el-tag {
      margin-left: 10px;
    }
    .button-new-tag {
      margin-left: 10px;
      height: 32px;
      line-height: 30px;
      padding-top: 0;
      padding-bottom: 0;
    }
    .input-new-tag {
      width: 90px;
      margin-left: 10px;
      vertical-align: bottom;
    }
    .el-select{
      display: block;
    }
</style>